<template>
  <div>
    <!-- 三级导航分类栏 -->
    <CategorySelector :isDisabled="!isShowAttrList" />
    <!-- 平台属性表格 -->
    <el-card class="box-card" style="margin-top:20px">
      <div v-if="isShowAttrList">
        <el-button type="primary" :icon="Plus" style="margin-bottom:20px" :disabled="!categoryListStore.category3Id"
          @click="addAttrValueInfo">添加属性</el-button>
        <el-table :data="attrList" border style="width: 100%">
          <el-table-column type="index" align="center" label="序号" width="90" />
          <el-table-column prop="attrName" label="属性名称" width="180" />
          <el-table-column label="属性值列表">
            <template v-slot="{ row }">
              <el-tag type="success" v-for="attr in  row.attrValueList" :key="attr.id" style="margin-right:6px">
                {{ attr.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot="{ row, $index }">
              <el-button title="编辑属性" type="primary" size="small" :icon="Edit" @click="updateAttrValue(row)" />

              <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" title="确定删除此项数据吗?"
                @confirm="confirmEvent(row, $index)" @cancel="cancelEvent">
                <template #reference>
                  <el-button title="删除属性" type="danger" size="small" :icon="Delete" />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加属性 -->
      <div v-else>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="属性名 ">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" />
          </el-form-item>
        </el-form>
        <el-button type="primary" :icon="Plus" :disabled="!attrInfo.attrName" @click="addAttrValue">添加属性值</el-button>
        <el-button @click="isShowAttrList = true">取消</el-button>
        <el-table style="width: 100%;margin:20px 0" :data="attrInfo.attrValueList">
          <el-table-column type="index" align="center" label="序号" width="90" />
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input v-if="row.isShowInput" v-model="row.valueName" width="220px" ref="inputRef"
                @blur="showSpan(row, $index)"></el-input>
              <span v-else @dblclick="showInput(row)" style="display:inline-block;width:100%">{{ row.valueName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot="{ $index }">
              <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" title="确定删除此项属性值吗?"
                @confirm="deleteAttrValue($index)" @cancel="cancelEvent">
                <template #reference>
                  <el-button title="删除属性" type="danger" size="small" :icon="Delete" />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" :disabled="!attrInfo.attrValueList.length" @click="saveAttrInfo">保存</el-button>
        <el-button @click="isShowAttrList = true">取消</el-button>
      </div>

    </el-card>

  </div>

</template>

<script lang="ts">
export default {
  name: 'attr'
}
</script>

<script setup lang="ts">
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { ref, watch, reactive, nextTick } from "vue"
import { ReqGetAttrListData, reqDelAttrInfo, reqSaveAttrInfo } from "@/api/product/attr"
import { useCategoryListStore } from "@/stores/categorySelectorList"
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage, } from 'element-plus'
import type { InputInstance, } from 'element-plus'
import type { attrValueModel, attrInfoModel, attrInfoListModel } from "@/api/product/model/attr"


const categoryListStore = useCategoryListStore()

const attrList = ref<attrInfoListModel>([])
const isShowAttrList = ref(true)

// 获取input光标
const inputRef = ref<InputInstance>()

// 定义一个 添加数据 数组
const attrInfo = reactive<attrInfoModel>({
  attrName: "",
  attrValueList: [],
  categoryId: 0,
  categoryLevel: 3,
})

// 1.发送请求 根据三级分类id 获取 属性 数据
const getAttrAllListData = async () => {
  let result = await ReqGetAttrListData({
    category1Id: categoryListStore.category1Id,
    category2Id: categoryListStore.category2Id,
    category3Id: categoryListStore.category3Id
  })
  // console.log(result)
  // 设置数据
  attrList.value = result
}

// 2.监听category3Id  一发生变化就发送请求获取数据
watch(() => categoryListStore.category3Id, () => {
  // 只有选择了category3Id才能发送请求
  if (!categoryListStore.category3Id) {
    attrList.value = []
    return
  }
  getAttrAllListData()
}, { immediate: true })


// 3.点击 删除icon 弹出气泡框 并 删除数据
const confirmEvent = async (row: attrInfoModel, index: number) => {
  await reqDelAttrInfo(row.id as number)
  ElMessage.success("删除数据成功")
  // 重下新发送请求获取数据
  // getAttrAllListData()
  // 为了避免重复发送请求 也可以使用下面的方法 减少发送次数
  attrList.value.splice(index, 1)
}
// 3.2取消删除
const cancelEvent = () => {
  ElMessage.info("取消删除")
}
// 4.点击添加属性值 按钮  
const addAttrValue = () => {
  // 4.1追加数组
  attrInfo.attrValueList.push({
    attrId: 0,
    valueName: "",
    isShowInput: true
  })
  // 4.2获取输入框焦点
  nextTick(() => {
    inputRef.value?.focus()
  })

}
// 5.失去焦点时 切换span标签
const showSpan = (row: attrValueModel, index: number) => {
  // 5.1 删除空白属性值
  if (!row.valueName.trim()) {
    attrInfo.attrValueList.splice(index, 1)
    return
  }
  // 5.2切换span标签
  row.isShowInput = false
}
// 6.双击span标签
const showInput = (row: attrValueModel) => {
  // 6.1切换input标签
  row.isShowInput = true
  // 6.2自动获取焦点
  nextTick(() => {
    inputRef.value?.focus()
  })
}
// 7.点击 attrValueList 中的删除icon 删除属性值
const deleteAttrValue = (index: number) => {
  // 删除属性值
  attrInfo.attrValueList.splice(index, 1)
}
// 8.点击 保存 按钮 添加/修改数据
const saveAttrInfo = async () => {
  // 8.0 重新获取 category3id
  attrInfo.categoryId = categoryListStore.category3Id as number
  // 8.1发送请求 添加/编辑数据
  await reqSaveAttrInfo(attrInfo)
  // 8.2 显示AttrList 界面
  isShowAttrList.value = true
  // 8.3 重新获取数据
  getAttrAllListData()
}
// 9.点击 添加属性 按钮
const addAttrValueInfo = () => {
  // 9.1 显示 attrlist界面
  isShowAttrList.value = false
  // 9.2清空 旧值
  attrInfo.attrName = ""
  attrInfo.attrValueList = []
  // 9.3清空id
   delete attrInfo.id
}
// 10.点击 修改 icon
const updateAttrValue = (row: attrInfoModel) => {
  // 10.1 显示attrlist界面
  isShowAttrList.value = false
  // 10.2 数据回显
  Object.assign(attrInfo, row)
}
</script>

<style lang="scss" scoped>

</style>